<template>
  <div class="home">
    <Login v-if="showLogin" @close="showLogin=false" />
      <template v-if="user._id">
  <div class="background">
    <div class="page-wrapper">
      <div class="mystudy">
        <div style="width: 28%; float: left; overflow: hidden;padding-top: 100px;">
          <div class="chart1" id="mychart1" :style="{ width: '350px', height: '360px' }"></div>
        </div>
        <div style="width: 40%; float: left; overflow: hidden">
          <div class="chart2" id="mychart2" :style="{ width: '400px', height: '360px' }"></div>
        </div>
        <div style="width: 30%; float: right; overflow: hidden;padding-top: 100px;">
          <div style="width:300px;height:360px;" ref="hygrometer"></div>
        </div>
        <div class="advice">
            {{ advice }}
        </div>
      </div>
    </div>
</div>
      </template>
      <div v-else class="main">
          <div class="header">欢迎来到星星学苑</div>
          <img src="../static/icons/logo.svg" />
          <div class="start" @click="showLogin=true">登录学习</div>
      </div>
</div>
</template>

<script>
import axios from "axios"
import Login from '@/components/Login'
import cn from '@/api/cn'
export default {
  name: 'mystudy',
  components: {
    Login
  },
  data() {
    return {
      blink:false,
      showLogin: false,
      userName: '11',
      mathprogress: '',
      englishprogress: '',
      chineseprogress: '',
      focus: '',
      advice: '1111'
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  created() {
    this.setUserName() // 设置当前用户名
    console.log('设置当前用户名')
  },
  mounted() {
    setInterval(()=>{
      this.blink = !this.blink
    },200)
    this.$event.on('login', this, () => { this.showLogin = true })
    this.submitTest();
  },
  methods: {
    submitTest() {
      var http = axios.create({
        baseURL: "^/api",
        timeout: 3000,
        headers: { "Content-Type": "application/json" }
      });
      console.log("进入submitTest:");
      let url = "/api/getresult";
      cn.getUserName().then((res) => {
        console.log(res)
        this.userName = res
        http.post('http://47.113.150.171:8080' + url, {
        userName: this.userName
      })
        .then(response => {
          console.log(response)
          console.log(this.userName)
          console.log(response.data);
          this.mathprogress = response.data[this.userName].mathprogress;
          this.chineseprogress = response.data[this.userName].chineseprogress;
          this.englishprogress = response.data[this.userName].englishprogress;
          this.focus = response.data[this.userName].focus;
          this.advice = response.data[this.userName].advise;
          let mychart1 = this.$echarts.init(document.getElementById('mychart1'))
          mychart1.setOption({
            tooltip: {
              trigger: 'item'
            },
            title: {
              text: "学习进度",
              x: 'center'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              icon: 'circle'
            },
            xAxis: {
              data: ["通识", "英语", "语文"]
            },
            yAxis: {},
            series: [
              {
                name: '学习进度',
                type: 'bar',
                data: [
                  {
                    value: this.mathprogress,
                    itemStyle: {
                      color: '#fc8251',
                      shadowColor: "#91cc75",
                      borderType: "dashed",
                      opacity: 0.8
                    }
                  },
                  {
                    value: this.englishprogress,
                    itemStyle: {
                      color: '#5470c6',
                      shadowColor: "#91cc75",
                      borderType: "dashed",
                      opacity: 0.8
                    }
                  },
                  {
                    value: this.chineseprogress,
                    itemStyle: {
                      color: '#9A60B4',
                      shadowColor: "#91cc75",
                      borderType: "dashed",
                      opacity: 0.8
                    }
                  }],

                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0
                  }
                },
                itemStyle: {
                  color:"#2effc7cf",
                  barBorderRadius: 5,
                  borderWidth: 1,
                  borderType: "solid",
                  borderColor: "#73c0de",
                  shadowColor: "#5470c6",
                  shadowBlur: 3
                }
              }
            ]
          })
          let mychart2 = this.$echarts.init(document.getElementById('mychart2'))
          mychart2.setOption({
            tooltip: {
              trigger: 'item'
            },
            title: {
              text: "学科均衡占比",
              x: 'center'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              icon: 'circle'
            },
            series: [
              {
                name: '学科均衡占比',
                type: 'pie',
                itemStyle: {
                  normal: {
                    color: function (colors) {
                      var colorList = [
                        '#fc8251',
                        '#5470c6',
                        '#9A60B4',
                      ];
                      return colorList[colors.dataIndex];
                    }
                  },
                },
                radius: '50%',
                data: [
                  { value: this.mathprogress, name: '通识' },
                  { value: this.englishprogress, name: '英语' },
                  { value: this.chineseprogress, name: '语文' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0
                  }
                }
              }
            ]
          })
          let hygrometer = this.$echarts.init(this.$refs.hygrometer)
          // 使用指定的配置项和数据显示图表
          hygrometer.setOption({
            tooltip: {
              show: true
            },
            title: {
              text: '专注力',
              x: 'center',
              y: '0px'
            },
            series: [{
              name: '专注力',
              type: 'liquidFill',
              radius: '215px',
              data: [this.focus],
              label: {
                normal: {
                  color: '#27e5f1',
                  insideColor: '#fff',
                  textStyle: {
                    fontSize: 40,
                    fontWeight: 'bold',
                  }
                }
              },
              color: [{
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 1,
                  color: ['#6a7feb'], // 0% 处的颜色
                }, {
                  offset: 0,
                  color: ['#27e5f1'], // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }],
              outline: {
                show: true,
                borderDistance: 5,
                itemStyle: {
                  borderColor: '#27e5f1',
                  borderWidth: 3
                }
              }
            }]
          })
        })
        .catch(error => {
          console.log('Error:', error);
          if (error.response) {
            console.log('Response data:', error.response.data);
          }
        });
      }).catch(err => console.log(err))
    },
    drawLiquidfill() {
      // 基于准备好的dom，初始化echarts实例
      let hygrometer = this.$echarts.init(this.$refs.hygrometer)
      // 使用指定的配置项和数据显示图表
      hygrometer.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '专注力',
          x: 'center',
          y: '0px'
        },
        series: [{
          name: '专注力',
          type: 'liquidFill',
          radius: '215px',
          data: [this.focus],
          label: {
            normal: {
              color: '#27e5f1',
              insideColor: '#fff',
              textStyle: {
                fontSize: 40,
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: ['#6a7feb'], // 0% 处的颜色
            }, {
              offset: 0,
              color: ['#27e5f1'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              borderColor: '#27e5f1',
              borderWidth: 3
            }
          }
        }]
      })
    },
    setUserName(){
      cn.getUserName().then((res) => {
        this.userName = res
      }).catch(err => console.log(err))
    }
  }
}
</script>
<style scoped>
.main {
height: fit-content;
padding: 110px 30px;
box-sizing: border-box;
max-width: 1000px;
margin: 0 auto;
}
.header {
width: 100%;
color: #40BC96;
text-align: center;
font-size: 42px;
letter-spacing: 3px;
font-weight: bold;
margin-top: 40px;
margin-bottom: 80px;
}
.start {
width: 240px;
height: 64px;
margin: 100px auto 0 auto;
background: #3CCFCF;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.5s ease;
cursor: pointer;
}

.start:hover {
background: #F9CC28;
color: #455358;
}
.chart2 {
  padding-left: 100px;
  padding-top: 100px;
}

.chart3 {
  padding-left: 600px;
  padding-top: 100px;
}
.home {
width: 100vw;
height: 100vh;
background: #F0F0F0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.background {
  background-color: #96dff4cf;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .page-wrapper {
    width: 100%;/*1200px;*/
    height: 100%;/*700px;*/
    background-color: rgba(203, 250, 250, 0.796);
    box-shadow: rgb(118, 117, 117) 0px 0px 10px;
  }
}

.advice-text {
  display: center;
}

.advice {
  display: flex;
  border-top: 10px dotted rgb(128, 255, 170);
  border-bottom: 10px dotted rgb(128, 255, 170);
  /*height: fit-content;*/
  height: 200px;
  width: 1300px;
  text-align:center;
  padding-left: 100px;
  padding-right: 100px;
  color:#2c07b2;
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  text-indent: 5em;
  background: #f5addd;
  border-radius: 2px;
  box-shadow: 0 0 5px #f6a9dc,
  0 0 25px #f6a9dc,
  0 0 50px #f6a9dc,
  0 0 100px #f6a9dc;
}

</style>
